<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>俄罗斯方块AI测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .container {
            text-align: center;
        }
        canvas {
            border: 2px solid #333;
            background-color: #111;
        }
        .controls {
            margin-top: 20px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            margin: 5px;
            cursor: pointer;
        }
        #aiBtn.active {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>俄罗斯方块AI测试</h1>
        <canvas id="tetris" width="300" height="600"></canvas>
        <canvas id="nextPiece" width="120" height="120"></canvas>
        <div class="info">
            <p>分数: <span id="score">0</span></p>
            <p>行数: <span id="lines">0</span></p>
            <p>等级: <span id="level">1</span></p>
        </div>
        <div class="controls">
            <button id="startBtn">开始</button>
            <button id="pauseBtn">暂停</button>
            <button id="resetBtn">重置</button>
            <button id="aiBtn">启用AI</button>
        </div>

        <script src="tetris.js"></script>
        <script src="ai.js"></script>
        <script>
            // 初始化游戏
            const tetris = new Tetris('tetris', 'nextPiece', 'score', 'lines', 'level');
            const ai = new TetrisAI(tetris);
            
            // 绑定按钮事件
            document.getElementById('startBtn').addEventListener('click', () => {
                tetris.start();
            });
            
            document.getElementById('pauseBtn').addEventListener('click', () => {
                tetris.pause();
            });
            
            document.getElementById('resetBtn').addEventListener('click', () => {
                tetris.reset();
            });
            
            document.getElementById('aiBtn').addEventListener('click', () => {
                ai.toggleAI();
            });
        </script>
    </div>
</body>
</html>